<script>
export default {
  data() {
    return {
      formData: {},
      institutions: [],
      selectedLabels: [],
      bao: [],
      dall: [],
      imageUrl: '',
      dialogTableVisible: false,
      baoall: [],
      idsbao: [],
      tableDate: {},
      servicePackage: {},
      hobby: [],
      doctorInfo:{},
      test: {
        id:1,
        creation: '2024-10-31 12:00:33',
        sex: '男',
        img: 'https://spyx-h2310a.oss-cn-beijing.aliyuncs.com/2024/10/31/b351f7d9bf6c428085a8c73a34b0b9282.jpeg',
        name: '张三',
        role: '全科医师',
        introduce: '北京大学第一医院内分泌科专家，从事内分泌相关疾病35余年，尤其擅长代谢性疾病引起的不孕不育诊疗，现任北京天伦医院不孕不育妇科特聘专家。\n' +
            '\n' +
            '2、1979—1984年就读于北京医学院医学系，随后在北京医科大学第一医院(现北京大学第一医院)内分泌科读研究生，毕业后留院工作至今。',
        speciality: '甲状腺疾病及内分泌疾病，擅长甲亢、甲减、桥本病、糖尿病、多囊卵巢、代谢异常、甲状腺炎、甲状腺低下、甲状腺功能减退、甲状腺功能失调、甲状腺激素异常等引起的不孕不育症的治疗和孕期管理、生活指导，在治疗各种代谢内分泌异常方面有丰富的临床经验。',
      },

      table: false,
      table1: false,
      dialog: false,
      loading: false,
      formLabelWidth: '80px',
      timer: null,

    };
  },
  methods: {
    a1(id) {
      this.axios.get(`http://localhost:8302/bao/findbao?id=${id}`).then(res => {
        this.servicePackage = res.data.data;
        this.hobby = this.servicePackage.biaoqian.split(',');
      })
    },
    a2(id) {
      this.axios.get(`http://localhost:8302/bao/selbyxid?id=${id}`).then(res => {
        this.tableDate = res.data.data;
      })
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要提交表单吗？')
          .then(_ => {
            this.loading = true;
            this.timer = setTimeout(() => {
              done();
              // 动画关闭需要一定的时间
              setTimeout(() => {
                this.loading = false;
              }, 400);
            }, 2000);
          })
          .catch(_ => {
          });
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },


    tjbao() {
      this.dialogTableVisible = true
    },
    submitForm() {
      // 提交表单逻辑，可以调用后端接口保存数据
      var a=[];
      this.idsbao.forEach(item => {
        if (item.id != null) {
          a.push(item.id)
        }
      })
      var b=[]
      this.dall.forEach(item => {
        if (item.id != null) {
          b.push(item.id)
        }
      })
      this.formData.label = this.selectedLabels.join(',')

      this.axios.post(`http://localhost:8302/team/save?baoid=${a}&doctorid=${b}&name=张三`,this.formData).then(res=>{
        if (res.data.code==200){
          this.$router.push('/team')
          this.$message({
            type: 'success',
            message: '保存成功!'
          });
        }else {
          this.$message({
            type: 'error',
            message: '保存失败!'
          });
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    findjg() {
      this.axios.get('http://localhost:8302/team/findjigou').then(res => {
        this.institutions = res.data.data
      })
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.formData.img = res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    findbao() {
      this.axios.get('http://localhost:8302/bao/getAll').then(res => {
        this.baoall = res.data.data
      })
    },
    handleSelectionChange(val) {
      this.idsbao = val;
    },
    qx() {
      this.dialogTableVisible = false
      this.idsbao = [];
    },
    bc() {
      var ids = []
      for (var i = 0; i < this.idsbao.length; i++) {
        ids.push(this.idsbao[i].id);
      }
      if (ids != null && ids.length > 0) {
        this.dialogTableVisible = false;
        this.axios.get(`http://localhost:8302/team/bao?ids=${ids}`).then(res => {
          this.bao = res.data.data;
          ids = [];
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请选择至少一个服务包!'
        });
      }
    },
    dj1(id) {
      this.table = true
      // alert(id)
      this.a1(id)
      this.a2(id)
    },
    dj2(aa) {
      this.table1 = true
      this.doctorInfo=aa
    }
  },
  mounted() {
    // 在页面加载时，调用findAll方法获取数据
    this.findjg();
    this.findbao();
    this.dall.push(this.test)
  }
}
</script>

<template>
  <div style="width: 100%;" align="left">
    <div style="background-color: #F2F7FB;width: 100%;padding-top: 20px;margin-left: 20px">
      <el-header align="left" style="margin-top: 60px">团队信息</el-header>
      <el-drawer
          title="医生详情"
          :visible.sync="table1"
          direction="rtl"
          size="900px">
        <div style=" display: flex;justify-content: space-between;padding: 0px 40px">
          <div> 医生编号：{{ doctorInfo.id }}</div>
          医生姓名：{{ doctorInfo.name }}
          <img style="width: 50px;border-radius: 50%" v-if="doctorInfo.img" :src="doctorInfo.img" alt="医生头像">
          联系电话：{{ doctorInfo.phone }}
        </div>
        <div style="margin-left: 40px">
          <p style="margin-top: 20px">性别：{{ doctorInfo.sex }}</p>
          <p style="margin-top: 20px">医生简介：{{ doctorInfo.introduce }}</p>
          <p style="margin-top: 20px">医生擅长：{{ doctorInfo.speciality }}</p>
          <p style="margin-top: 20px">创建时间：{{ doctorInfo.creation }}</p>
          <div style="margin-top: 20px">
            状态：
            <el-switch
                disabled
                v-model="doctorInfo.status"
                active-color="#13ce66"
                inactive-color=""
                :active-value="1"
                :inactive-value="0"
            ></el-switch>
          </div>
        </div>
      </el-drawer>

      <el-drawer
          title="服务包详情"
          :visible.sync="table"
          direction="rtl"
          size="900px">
        <el-col :span="10" class="a" style="margin-top: 80px;">
          <span>
            <img :src="servicePackage.img" width="60%">
          </span>
        </el-col>
        <el-col :span="10" class="a" align="left">
          <el-form label-width="120px">
            <el-form-item label="服务包名称">
              <span>{{ servicePackage.name }}</span>
            </el-form-item>
            <el-form-item label="使用状态">
              <span>{{
                  servicePackage.zt == 0 ? '待审核' : servicePackage.zt == 1 ? '使用中' : servicePackage.zt == 2 ? '已驳回' : servicePackage.zt == 3 ? '已停用' : ''
                }}</span>
            </el-form-item>
            <el-form-item label="订购定价">
              <span>{{ servicePackage.price }}</span>
            </el-form-item>
            <el-form-item label="服务对象">
              <span>{{ servicePackage.fwdx }}</span>
            </el-form-item>
            <el-form-item label="签约周期">
              <span>{{ servicePackage.qytime }}</span>
            </el-form-item>
          </el-form>
          <el-form label-width="120px">
            <el-form-item label="服务介绍">
              <span>{{ servicePackage.fwjs }}</span>
            </el-form-item>
            <el-form-item label="服务标签">
              <el-form-item v-for="(item,index) in hobby" :key="index">
                <span>{{ item }}</span>
              </el-form-item>
            </el-form-item>
          </el-form>
        </el-col>
        <el-table
            width="100%"
            :data="tableDate"
            stripe>
          <el-table-column
              prop="id"
              label="项目编号">
          </el-table-column>
          <el-table-column
              prop="name"
              label="项目名称">
          </el-table-column>
          <el-table-column
              label="次数">
            <template slot-scope="scope">
              {{ scope.row.num }} 次
            </template>
          </el-table-column>
          <el-table-column
              prop="xmlx"
              label="项目类型">
          </el-table-column>
          <el-table-column
              prop="xmjs"
              label="项目介绍">
          </el-table-column>
        </el-table>
      </el-drawer>

      <el-main>
        <el-form ref="form" :model="formData" label-width="120px">
          <!--          <el-form-item label="团队编号">-->
          <!--            <el-input v-model="formData.teamNumber" disabled></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item label="团队名称">
            <el-input v-model="formData.teamname" style="width: 400px;"></el-input>
          </el-form-item>
          <el-form-item label="团队头像">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:8302/bao/tp"
                name="file"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img width="50px" v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="所属机构">
            <el-select placeholder="请选择" v-model="formData.iid">
              <!-- 这里可以根据实际情况填充机构选项 -->
              <el-option label="请选择" value="null"></el-option>
              <el-option v-for="option in institutions" :label="option.organization" :key="option.id" :value="option.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="团队标签">
            <el-select v-model="selectedLabels" multiple placeholder="请选择标签">
              <!--                   <el-option label="全选" value="全选"></el-option>-->
              <el-option label="慢病护理" value="慢病护理"></el-option>
              <el-option label="高血压" value="高血压"></el-option>
              <el-option label="高血糖" value="高血糖"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="团队成员">
            <!--            <el-tag>{{formData.teamMember}}</el-tag>-->
            <el-form-item>
              <el-row v-for="(aa,index) in dall" style="width: 300px;display: inline-block;margin-right: 10px">
                <a @click="dj2(aa)">
                  <el-col :span="24">
                    <el-card style="height: 150px; ">
                      <img style="float: left;margin-top: 10px" width="120px" height="80px" align="left" :src="aa.img"
                           alt="">
                      <span style="float:right;">
                    <span>{{ aa.name }}
                      <!--                      <span style="color: green" v-if="aa.zt==0">待审核</span>-->
                      <!--                      <span style="color: blue"  v-if="aa.zt==1">使用中</span>-->
                      <!--                      <span style="color: red"  v-if="aa.zt==2">已驳回</span>-->
                      <!--                      <span style="color: yellow"  v-if="aa.zt==3">已停用</span>-->
                    </span>
                        <div>{{ aa.role }}</div>
                        <!--                        <div v-if="aa.biaoqian">-->
                        <!--                          <span  :style="{ fontSize: '12px' }">{{ aa.biaoqian }}</span>-->
                        <!--                        </div>-->
                      </span>
                    </el-card>
                  </el-col>
                </a>
              </el-row>
            </el-form-item>

          </el-form-item>
          <el-form-item label="服务包">
            <!--            <el-input v-model="formData.serviceDirection"></el-input>-->
            <el-row v-for="aa in bao" style="width: 300px;display: inline-block;margin-right: 10px">
              <!--               <template slot-scope="scope">-->
              <a @click="dj1(aa.id)">
                <el-col :span="24">
                  <el-card>
                    <img style="float: left;margin-top: 30px" width="120px" height="80px" align="left" :src="aa.img"
                         alt="">
                    <span style="float:right;">
                    <span>{{ aa.name }}
                      <span style="color: green" v-if="aa.zt==0">待审核</span>
                      <span style="color: blue" v-if="aa.zt==1">使用中</span>
                      <span style="color: red" v-if="aa.zt==2">已驳回</span>
                      <span style="color: yellow" v-if="aa.zt==3">已停用</span>
                    </span>
                        <div>服务对象: {{ aa.fwdx }}</div>
                        <div v-if="aa.biaoqian">
                          <span :style="{ fontSize: '12px' }">{{ aa.biaoqian }}</span>
                        </div>
                      </span>
                  </el-card>
                </el-col>
              </a>
              <!--               </template>-->
            </el-row>
            <button style="width: 100px;" @click="tjbao()">添加服务包</button>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100px;" type="primary" @click="submitForm">提交</el-button>
            <el-button style="width: 100px;" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>

        <el-dialog title="服务包" :visible.sync="dialogTableVisible">
          <el-table
              ref="multipleTable"
              :data="baoall"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="name"
                label="服务包">
            </el-table-column>
            <el-table-column
                prop="fwdx"
                label="服务对象">
            </el-table-column>
            <el-table-column
                prop="fwjs"
                label="服务介绍">
            </el-table-column>
          </el-table>
          <el-button style="width: 100px;" size="mini" type="primary" @click="bc()">确定</el-button>
          <el-button style="width: 100px;" size="mini" type="primary" @click="qx">取消</el-button>
        </el-dialog>
      </el-main>
    </div>
  </div>
</template>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 18px;
  color: #8c939d;
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
}

.avatar {
  width: 38px;
  height: 38px;
  display: block;
}

.a {
  background-color: #FFFFFF;
}
</style>
